<template>
    <el-cascader
      :value="value"
      size="small"
      :options="options"
      separator="-"
      :props="{label: 'name', value: 'id'}"
      @change="handleChange"
    />
  </template>
  
  <script>
  import { getDepartments } from '@/api/department'
  import { transList2TreeData } from '@/utils'
  export default {
    props: {
      value: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        value2: [], // 是个数组  收集选中的值(包含父级)
        options: [
        //   {
        //     id: 1, // 提交后端
        //     name: '指南', // 显示出来
        //     children: [
        //       { name: '指南1', id: 2 },
        //       { name: '指南2', id: 3, children: [{ name: '指南2-1', id: 4 }] }
        //     ]
        //   }
  
        ]
      }
    },
    created() {
        this.getListData()
    },
    methods: {
      handleChange(value) {
        // 当选中某个节点 触发change事件 执行函数
        // value 是选中的值 是个数组(包含父级的value)
        // console.log(value[value.length - 1])
        this.$emit('input', value[value.length - 1])
      },
     async getListData(){
     const rules  =  await getDepartments()
     this.options = transList2TreeData(rules,0)

      }

    }
  }
  </script>
  
  <style>
  
  </style>